import Vue from 'vue'
import Component from 'vue-class-component'
import '../settingStyle.css'
import {formatDate} from '@/utils/commonMethod/method.js'
import TableListClass from '@/components/tableList.js'
import VueScroller from '@/components/VueScroller.vue'
import BlankPageClass from '@/components/blankPage.js'

@Component
export default class UserWantBuyClass extends Vue {
  loading = false
  wrapperHeight = 0
  list = []
  currentPage = 1
  pageSize = 10
  canLoad = true
  noData = false

  created() {
    this.wrapperHeight = document.documentElement.clientHeight - 64
    let mySelf = this
    eventBus.$on('wantBuyAdd', function(val) {
      mySelf.reloadDemands()
    })
  }

  updated() {

  }

  getParameters() {
    let params = {}
    params['pageSize'] = 10
    params['pageIndex'] = this.currentPage

    return params
  }

  findDemands(pageIndex = 1) {
    let params = this.getParameters()
    params['pageIndex'] = pageIndex
    return this.$axios.post('/demand/v1/demands', params)
      .then(response => {
        if (response.status === 0) {
          if (pageIndex === 1) {
            this.list = []
          }
          return response.data.demands
        }
      })
  }

  reloadDemands() {
    this.currentPage = 1
    this.findDemands(this.currentPage).then(demands => {
      console.log('dddddddddddddd', demands)

      if (demands) {
        this.list = [...this.list, ...demands]
      }
      this.showNodata()
    }).catch(() => {
      this.noData = true
    })
  }

  showNodata() {
    if (!this.list || this.list.length <= 0) {
      this.noData = true
    } else {
      this.noData = false
    }
  }

  infiniteHandler($state) {
    this.findDemands(this.currentPage++).then(demands => {
      console.log('dddddddddddddd', demands)
      $state.loaded()
      if (demands) {
        this.list = [...this.list, ...demands]
        console.log(this.list)
        if (demands.length < 10) {
          $state.complete()
        }
      } else {
        $state.complete()
      }
      this.showNodata()
    }).catch(() => {
      $state.complete()
    })
  }

  // async getData(state) {
  //   if (this.currentPage === 1) {
  //     this.list = []
  //   }
  //   try {
  //     let params = {}
  //     params['pageSize'] = 10
  //     params['pageIndex'] = this.currentPage
  //     const response = await this.$axios.post('/demand/v1/demands', params)

  //     if (response.status === 0) {
  //       if (!response.data.demands || response.data.demands.length < 10) {
  //         if (state) {
  //           state.complete()
  //         }
  //       }
  //       if (this.currentPage === 1) {
  //         this.list = response.data.demands
  //       } else {
  //         this.list = this.list.concat(response.data.demands)
  //       }
  //       this.currentPage ++
  //     }
  //     if (this.list.length <= 0) {
  //       this.noData = true
  //     } else {
  //       this.noData = false
  //     }
  //     if (state) {
  //       state.loaded()
  //     }
  //   } catch (e) {
  //     if (state) {
  //       state.complete()
  //     }
  //     console.log(e)
  //   }
  // }

  get caculateHeight() {
    return 'height:' + String(this.wrapperHeight) + 'px'
  }

  // loadData(state) {
  //   this.getData(state)
  // }

  // refresh () {
  //   this.currentPage = 1
  //   this.getData()
  // }

  createItems () {
    if (!this.list || this.list.length <= 0) {
      return
    }
    const item = this.list.map(value => {
      return <WantBuyItemClass item={value}></WantBuyItemClass>
    })
    return item
  }

  render () {
    return (
      <div class = 'content'>
        <mt-header class='header' fixed title="我的求买">
          <mt-button onClick={() => { this.$router.go(-1) }} icon="" slot="left"><icon name = 'backIcon' scale='2'/></mt-button>
          <mt-button onClick={() => { this.$router.push({name: 'wantBuyAdd'}) }} icon="" slot="right"><icon name = 'addIcon' scale='2'/></mt-button>
        </mt-header>
        <BlankPageClass onRefresh={this.reloadDemands} v-show={this.noData}></BlankPageClass>
        <VueScroller v-show={!this.noData} style='margin-top:64px' height={this.wrapperHeight} infinite={this.infiniteHandler} refresh={this.reloadDemands}>
          {this.createItems()}
        </VueScroller>
       </div>
    )
  }
}

@Component({
  props: {
    item: Object
  }
})
class WantBuyItemClass extends Vue {
  image = ''
  created () {
    let arr = JSON.parse(this.item.imageUrls)
    if (arr && arr.length > 0) {
      this.image = arr[0]
    }
  }
  handlerPushDetail () {
    this.$router.push({name: 'wantBuyDetail', params: {productId: this.item.demandId}})
  }

  render () {
    return (
      <div class = 'wantItemStyle' onClick={this.handlerPushDetail}>
        <div class="wantItemImageClass"><img src = {this.image ? this.image : ''}/></div>
        <div class='wantItemContentClass'>
          <p>{this.item.description}<font style='float:right;margin-right:15px;font-size: .8em;color:red'>{this.item.statusText ? this.item.statusText : ''}</font> </p>
          <p>接受价格 :{this.item.currency === 'RMB' ? '￥' : '€'}{this.item.acceptPrice ? this.item.acceptPrice : ''}<font style='float:right;margin-right:15px;font-size: .8em;color:#666'>{formatDate(this.item.dateAdded)}</font></p>
        </div>
      </div>
    )
  }
}
